Page({
  data: {
    tabs: [
      { id: 0, isActive: true, value: "体验问题" },
      { id: 1, isActive: false, value: "商品、商家投诉" },
    ],
    // 被选中的图片路径数组
    chooseImgs: [],
    // 文本域内容
    textVal: "",
  },
  // 自由数据存放点
  upLoadImgs: [],

  // 组件点击事件
  handleTabsItemChange(e) {
    const { index } = e.detail;
    // 修改源数组
    let { tabs } = this.data;
    tabs.forEach((v, i) => {
      i === index ? (v.isActive = true) : (v.isActive = false);
    });
    // 重新赋值到 data 对象中
    this.setData({
      tabs,
    });
  },

  // 添加图片按钮功能
  handleChooseImg() {
    // 小程序选用图片 API
    wx.chooseImage({
      count: 9,
      sizeType: ["original", "compressed"],
      sourceType: ["album", "camera"],
      success: (result) => {
        this.setData({
          // TIPS 用户有可能多次点击添加，所以需要拼接数组(跳过此步骤就只能保存单次选择项)
          chooseImgs: [...this.data.chooseImgs, ...result.tempFilePaths],
        });
      },
    });
  },

  // 删除图片
  handleRemoveImg(e) {
    const { index } = e.currentTarget.dataset;
    let { chooseImgs } = this.data;
    chooseImgs.splice(index, 1);
    this.setData({ chooseImgs });
  },

  // 文本域事件
  handleInput(e) {
    this.setData({
      textVal: e.detail.value,
    });
  },

  // 提交按钮事件
  handleFormSubmit() {
    const { textVal, chooseImgs } = this.data;
    if (!textVal.trim()) {
      wx.showToast({
        title: "输入不合法",
        icon: "none",
        mask: true,
      });
      return;
    }
    // 返回至上一个页面
    wx.navigateBack({
      delta: 1,
    });
    // 上传图片至指定服务器(只能单个上传，所以需要遍历图片数组)
    chooseImgs.forEach((v, i) => {
      wx.uploadFile({
        url: "https://images.ac.cn/Home/Index/UploadAction/",
        filePath: v,
        name: "file",
        formData: {},
        success: (result) => {
          if (i === chooseImgs.length - 1) {
            this.setData({
              textVal: "",
              chooseImgs: [],
            });
            wx.navigateBack({
              delta: 1,
            });
          }
        },
      });
    });
  },
});
